<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { UserDto, UserType } from '@/app/api/api';
import { useApiStore } from '@/app/api/apiStore';
import { userTypeReadable } from './models/userTypeDisplay';
import SideBar from '@/components/common/SideBar.vue';
import { getPop } from '@/app/globalStores/uniqueComponents';
import UserTreeNode from './components/UserTreeNode.vue';
import UserTypeDisplay from './components/UserTypeDisplay.vue';
import { useTreeMsgStore } from './models/treeMsgStore';
import { useUserInfoStore } from '@/app/globalStores/userInfo';

const props = defineProps<{
    type?: 'list'|'tree'
}>()
const list = ref<UserDto[]>()
const api = useApiStore()
const userInfo = useUserInfoStore()
const treeMsgStore = useTreeMsgStore()
async function loadList(onlyChildrenOf?:number) {
    if(props.type === 'tree'){
        if(onlyChildrenOf){
            treeMsgStore.call(onlyChildrenOf)
        }
        else{
            list.value = await api.user.getChildren(0)??[]
        }
    }else{
        list.value = await api.user.index()??[]
    }
}

const sidebar = ref<InstanceType<typeof SideBar>>()
const editingUser = ref<UserDto>()
const isCreatingUser = ref(false)
const creatingUserParent = ref<UserDto>()
const pop = getPop()
function startEditing(u:UserDto){
    isCreatingUser.value = false
    editingUser.value = {...u}
    sidebar.value?.extend()
}
function startCreating(parent?:UserDto){
    isCreatingUser.value = true
    creatingUserParent.value = parent
    editingUser.value = {
        id: 0,
        name: '',
        password: '',
        type: UserType.Tourist,
        parentId: parent?.id ?? 0,
    } 
    sidebar.value?.extend()
}
async function doneEditing(){
    if(!editingUser.value)
        return
    let success:undefined|boolean = undefined
    let parentId = 0
    if(editingUser.value.parentId){
        parentId = editingUser.value.parentId
    }
    if(isCreatingUser.value){
        success = await api.user.create(editingUser.value)
    }else{
        success = await api.user.update(editingUser.value)
    }
    if(success){
        sidebar.value?.fold()
        if(isCreatingUser.value){
            pop?.show('创建成功','success')
        }else{
            pop?.show('编辑成功','success')
        }
        await loadList(parentId)
    }
}

watch(()=>props.type, async()=>{
    await loadList() 
})

onMounted(async()=>{
    await loadList()
})
</script>

<template>
<h1 class="h1WithBtns">
    用户列表
    <div v-if="userInfo.isAdmin">
        <button @click="startCreating()">新建用户</button>
    </div>
</h1>
<div class="wideTableContainer">
<div v-if="type==='tree'">
    <UserTreeNode v-for="u in list" :key="u.id" :user="u"
        @start-edit="startEditing" @start-create="startCreating"/>
</div>
<table v-else class="fullWidth rowHoverEffect"><tbody>
    <tr>
        <th>名称</th>
        <th style="width: 100px;">类型</th>
        <th style="width: 100px;">操作</th>
    </tr>
    <tr v-for="u in list" :key="u.id">
        <td>
            <div class="uname">{{ u.name }}</div>
            <div class="uintro">{{ u.intro || '　' }}</div>
        </td>
        <td><UserTypeDisplay :user-type="u.type"/></td>
        <td>
            <button @click="startEditing(u)" class="lite">
                编辑
            </button>
        </td>
    </tr>
</tbody></table>
</div>
<SideBar ref="sidebar">
    <h1>{{isCreatingUser ? '新建用户':'编辑用户'}}</h1>
    <table v-if="editingUser">
        <tbody>
            <tr>
                <td>名称</td>
                <td>
                    <input v-model="editingUser.name"/>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input v-model="editingUser.password"/>
                </td>
            </tr>
            <tr>
                <td>简介</td>
                <td>
                    <textarea v-model="editingUser.intro"></textarea>
                </td>
            </tr>
            <tr>
                <td>类型</td>
                <td>
                    <select v-model="editingUser.type">
                        <option :value="UserType.Tourist">{{ userTypeReadable(UserType.Tourist) }}</option>
                        <option :value="UserType.Member">{{ userTypeReadable(UserType.Member) }}</option>
                        <option :value="UserType.Admin">{{ userTypeReadable(UserType.Admin) }}</option>
                    </select>
                </td>
            </tr>
            <tr v-if="isCreatingUser">
                <td>上级</td>
                <td v-if="creatingUserParent">
                    <div class="uname">{{ creatingUserParent.name }}</div>
                    <div class="uintro">{{ creatingUserParent.intro || '　' }}</div>
                </td>
                <td v-else>
                    <div class="noteMinor">顶级用户 无上级</div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button @click="doneEditing">OK</button>
                </td>
            </tr>
            <tr v-if="!isCreatingUser">
                <td colspan="2" class="noteMinor">
                    更改名称/密码后立即重新登录一次<br/>
                    让浏览器记住新密码
                </td>
            </tr>
        </tbody>
    </table>
</SideBar>
</template>

<style scoped lang="scss">
@use './styles/userInfo.scss';
</style>